<template>
    <div class="editor-wrapper">
        <div :id="editorId" class="editor-div"></div>
    </div>
</template>

<script>
    import Editor from 'wangeditor';
    // import 'wangeditor/release/wangEditor.min.css';

    export default {
        name: 'Editor',
        props: {
            value: {
                type: String,
                default: ''
            },
            /**
             * 绑定的值的类型, enum: ['html']
             */
            valueType: {
                type: String,
                default: 'html'
            },

            /**
             * @description 设置change事件触发时间间隔
             */
            changeInterval: {
                type: Number,
                default: 200
            },
            /**
             * @description 是否开启本地存储
             */
            cache: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                upload: '/api/file/uploadFile',
            };
        },

        computed: {
            editorId() {
                return `editor${this._uid}`;
            }
        },

        watch: {
            value(newValue, oldValue) {
                // console.log(newValue);
                // 解决页面第一次加载后获取的数据无法渲染到富文本的问题
                this._setHtmlOnce(newValue);
            }
        },

        methods: {
            setHtml(val) {
                this.editor.txt.html(val);
            },

            setEditorHeight() {
                let el = document.querySelector('.w-e-text-container');

                el.style.minHeight = '300px';
                el.style.height = '';
            },

            _setHtmlOnce(val) {
                if (!this.__setHtmlCount) {
                    this.editor.txt.html(val);
                    this.__setHtmlCount = 1;
                }
            }
        },

        mounted() {
            this.editor = new Editor(`#${this.editorId}`);
            this.editor.customConfig.onchange = html => {
                let text = this.editor.txt.text();
                // if (this.cache) localStorage.editorCache = html;
                this.$emit('input', this.valueType === 'html' ? html : text);
                this.$emit('on-change', html, text);
            };
            this.editor.customConfig.onchangeTimeout = this.changeInterval;
            this.editor.customConfig.showLinkImg = true;
            this.editor.customConfig.uploadFileName = 'file'  //上传参数 自定义
            this.editor.customConfig.uploadImgServer = this.upload   //上传图片
            this.editor.customConfig.uploadImgHooks = {  //监听
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                },
                fail: function (xhr, editor, result) {
                    this.$message.error('插入图片失败！')
                },
                error: function (xhr, editor) {
                    this.$message.error('插入图片失败！')
                },
                timeout: function (xhr, editor) {
                    this.$message.error('插入图片失败！')
                },
                customInsert: function (insertImg, result, editor) {
                    var url = result.data.fileUrl
                    insertImg(url)
                }
            }
            // create这个方法一定要在所有配置项之后调用

            this.editor.create();
            // this.setEditorHeight();
            // 如果本地有存储加载本地存储内容
            // let html = this.value || localStorage.editorCache;

            let html = this.value;
            if (html) this.editor.txt.html(html);
        }
    };
</script>


